<template>
    <div class="sendResourceDM">
        <div class="sendResourceDMTitle clearfix">
            <span class="over">已完成0人</span>
            <span class="unOver">未完成{{infoStudent.length}}人</span>
            <span class="overBar"></span>
            <span class="timer">{{hour}}:{{min}}:{{sec}}</span>
        </div>
        <div class="StuMain">
            <div class="StuItem"
                 v-for="(val, index) in infoStudent"
                 :key="val.ID"
                 :style="stuItemStyle">
                <div class="imgWarp">
                    <img :src="picSrc + val.Head"
                         class="image">
                </div>
                <span class="StuName">{{val.UserName}}</span>
                <span v-show="isAnswer(val.ID)" class="onLineMadel"></span>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: "sendResourceDM",
        props: [],
        computed: {
            ...mapGetters([
                'picSrc',
                'infoStudent'
            ]),
            stuItemStyle(){
                return {
                    width: ($('.StuMain').width() - 100) / 10 - 1 + 'px',
                    height: ($('.StuMain').height() - 60) / 4 + 'px'
                }
            },
            isAnswer(ID){

            }
        },
        mounted(){
            var _this = this
            var timerNum = 0;
            var minNum = 0;
            var hourNum = 0;
            setInterval(function () {
                timerNum++
                _this.sec = timerNum%60
                if(timerNum == 60){
                    timerNum = 0
                    minNum++
                    _this.min = minNum%60
                    if(_this.min < 10){
                        _this.min = '0' + minNum%60
                    }
                }
                if(minNum == 60){
                    minNum = 0
                    hourNum++
                    _this.hour = hourNum%60
                    if(_this.hour < 10){
                        _this.hour = '0' + hourNum%60
                    }
                }
                if(_this.sec < 10){
                    _this.sec = '0' + timerNum%60
                }
            },1000)
            $('.StuItem').css({
                width: ($('.StuMain').width() - 100) / 10 - 1 + 'px',
                height: ($('.StuMain').height() - 60) / 4 + 'px'
            })
            window.onresize = function () {

                $('.StuItem').css({
                    width: ($('.StuMain').width() - 100) / 10 - 1 + 'px',
                    height: ($('.StuMain').height() - 60) / 4 + 'px'
                })
            }
        },
        data () {
            return {
                hour:'00',
                min:'00',
                sec:'00'
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .sendResourceDM {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        min-width: 1200px;
        background: #ebebeb;
        .sendResourceDMTitle {
            background: #fff;
            height: 84px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
            span {
                display: block;
                float: left;
                font-size: 25px;
                font-weight: 800;
                font-family: "微软雅黑";
                line-height: 84px;
            }
            .over {
                padding-left: 60px;
                margin-left: 20px;
                color: #2452CA;
                background: url("../assets/images/student.png") no-repeat;
                background-position: 10px center;
                background-size: 40px;
            }
            .unOver {
                padding-left: 60px;
                margin-left: 20px;
                color: #8AAAFF;
                background: url("../assets/images/student.png") no-repeat;
                background-position: 10px center;
                background-size: 40px;
            }
            .overBar {
                width: 50%;
                height: 20px;
                box-shadow: 0 0 2px rgba(0, 0, 0, .5);
                border-radius: 10px;
                margin: 32px 10px 0;
                background-color: #E4EBFA;
            }
            .timer {
                color: #646368;
                font-size: 30px;
                font-weight: 600;
            }
        }
        .StuMain {
            display: flex;
            height: 80%;
            flex-wrap: wrap;
            overflow: scroll;
            .StuItem {
                width: 10%;
                height: 25%;
                margin: 5px;
                background: #fff;
                overflow: hidden;
                border-radius: 10px;
                position: relative;
                .onLineMadel{
                    width: 100%;
                    height: 100%;
                    display: block;
                    background: rgba(0, 0, 0, 0.6);
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
                .imgWarp{
                    height: 70%;
                    width: 100%;
                    text-align: center;
                    margin: 5px auto;
                    img{
                        display: block;
                        position: relative;
                        height: 100%;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                    }
                }
                .StuName{
                    display: block;
                    text-align: center;
                    height: 26px;
                    line-height: 26px;
                    color: #0b97c4;
                }
            }
        }
    }
</style>